<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <van-image :src="item.carouselUrl" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <van-grid :column-num="5">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <van-grid :column-num="2" border :gutter="10">
      <van-grid-item
        icon="photo-o"
        text="zhao"
        v-for="(item, index) in nav"
        :key="index"
        @click="active(item.goodsId)"
      >
        <template #icon>
          <van-image :src="item.goodsCoverImg" />
        </template>
        <template #text>{{ item.goodsName }} </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBaner } from '../../request/api.js'
export default {
  setup(props) {
    const list = reactive({
      banner: [],
      nav: [],
    })
    onMounted(async () => {
      const { data: data } = await getBaner()
      list.banner = data.data.carousels
      list.nav = data.data.newGoodses
      console.log(data.data.newGoodses) //banner数据
    })
    const router = useRouter()
    const active = (goodsId) => {
      router.push({ path: '/detali', query: { goodsId } })
    }

    return {
      ...toRefs(list),
      active,
    }
  },
}
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>
